<template>
  <el-dialog width="900px"
             :title="title"
             :visible.sync="dialogFormVisible">
    <el-form :model="addressFormData"
             ref="addressForm"
             :rules="addressFormRules"
             label-width="80px"
             size="small">
      <el-form-item label="收货人"
                    prop="name">
        <el-input style="width: 90px"
                  v-model="addressFormData.name"></el-input>
      </el-form-item>
      <el-form-item label="所在区域"
                    prop="region">
        <el-cascader size="medium"
                     :options="options"
                     v-model="selectedRegion"
                     @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址"
                    prop="address">
        <el-input style="width: 500px"
                  v-model="addressFormData.address"></el-input>
      </el-form-item>
      <el-form-item label="手机号码"
                    prop="phone">
        <el-input style="width: 235px"
                  v-model="addressFormData.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址"
                    prop="email">
        <el-input style="width: 500px"
                  v-model="addressFormData.email"></el-input>
      </el-form-item>
      <el-form-item label="地址别名"
                    prop="category">
        <el-input style="width: 100px"
                  v-model="addressFormData.category"></el-input>
        <span>&nbsp;建议填写常用名称</span>
        <el-tag v-for="(item, index) in addressCategory"
                :key="index"
                @click="addressFormData.category=item"
                style="margin-left: 10px"> {{item}}</el-tag>
      </el-form-item>
      <el-button @click="handleSubmit"> 保存收货地址 </el-button>
    </el-form>
  </el-dialog>
</template>

<script>
import { checkPhone, checkEmail } from 'utils/validate.js'
import { regionData, TextToCode, CodeToText } from 'element-china-area-data'
import { request } from 'network/request'

const addressCategory = ['家里', '父母家', '学校', '公司']
const baseForm = {
  name: '',
  region: '',
  address: '',
  phone: '',
  email: '',
  category: '',
}
export default {
  data() {
    return {
      addressCategory,
      title: '',
      dialogFormVisible: false,
      addressFormData: { ...baseForm },
      addressFormRules: {
        name: [
          { required: true, message: '请输入收货人名字', trigger: 'blur' },
        ],
        region: [
          {
            required: true,
            message: '请选择您收货的所在区域',
            trigger: 'blur',
          },
        ],
        address: [
          {
            required: true,
            message: '请输入您收货的详细地址',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入你的电话号码', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' },
        ],
        email: [{ validator: checkEmail, trigger: 'blur' }],
      },
      // 下拉地区选择框数据
      options: regionData,
      selectedRegion: [],
      status: '',
    }
  },
  methods: {
    openDialog(formData = {}) {
      this.title = formData.name ? '编译收货地址' : '新增收货地址'
      this.status = formData.name ? 0 : 1
      this.addressFormData = Object.assign({ ...baseForm }, formData)
      if (formData.name) {
        const { region } = this.addressFormData
        const regionArr = region.split('/')
        this.selectedRegion[0] = TextToCode[regionArr[0]].code
        this.selectedRegion[1] = TextToCode[regionArr[0]][regionArr[1]].code
        this.selectedRegion[2] =
          TextToCode[regionArr[0]][regionArr[1]][regionArr[2]].code
      }

      this.$nextTick(() => {
        this.dialogFormVisible = true
        this.$refs.addressForm && this.$refs.addressForm.clearValidate()
      })
    },

    async handleSubmit() {
      this.dialogFormVisible = false
      const region = this.selectedRegion
        .map((item) => {
          return CodeToText[item]
        })
        .join('/')
      this.addressFormData.region = region
      if (this.status === 0) {
        await request({
          url: '/recAddress',
          method: 'put',
          data: this.addressFormData,
        })
        this.$message({
          type: 'success',
          message: '修改成功',
        })
      } else {
        await request({
          url: '/recAddress',
          method: 'post',
          data: this.addressFormData,
        })
        this.$message({
          type: 'success',
          message: '新增成功',
        })
      }
      this.$parent.getUserRecAdd()
    },

    handleChange(value) {},
  },
}
</script>

<style lang="less" scoped>
.el-tag:hover {
  cursor: pointer;
}
</style>